<template>
  <div class="regist">
    <div class="title">注册用户</div>
    <div class="form-item">
      <input type="text" v-model="user.nickname" @blur="check('nickname')" placeholder="昵称" />
      <p ref="nickname">昵称不能少于2位</p>
    </div>
    <div class="form-item">
      <input type="text" v-model="user.phone" @blur="check('phone')" placeholder="手机号" />
      <p ref="phone">请输入合法的手机号</p>
    </div>
    <div class="form-item">
      <input type="password" v-model="user.password" @blur="check('password')" placeholder="密码" />
      <p ref="password">密码长度不低于6位，必须包含小写字母和数字</p>
    </div>
    <div class="form-item sex">
      <span>性别：</span>
      <input type="radio" v-model="user.sex" value="0" />男
      <input type="radio" v-model="user.sex" value="1" />女
      <p ref="sex">请选择性别</p>
    </div>
    <div class="form-item">
      <input type="button" value="立即注册" @click="register()" />
      <p class="jump">
        已有账号，去
        <a href="javascript:;" @click="jumpPage('/login')">登录</a>
      </p>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import axios from "axios";

export default {
  computed: {
    ...mapState(["ip", "port"])
  },
  data() {
    return {
      user: {}
    };
  },
  methods: {
    ...mapActions(["jumpPage", "registry"]),
    check(value) {
      // 判断昵称是否符合规则
      if (value === "nickname" || value === "all") {
        if (!this.user.nickname || this.user.nickname.length < 2) {
          this.$refs.nickname.style.display = "inline";
          return false;
        } else {
          this.$refs.nickname.style.display = "none";
        }
      }
      // 判断手机号是否符合规则
      if (value === "phone" || value === "all") {
        let pattern = /^1[34578]\d{9}$/;
        if (!this.user.phone || !pattern.test(this.user.phone)) {
          this.$refs.phone.style.display = "inline";
          return false;
        }
        // 判断手机号是否重复
        axios
          .get(`http://${this.ip}:${this.port}/consumer/checkPhone/` + this.user.phone)
          .then(res => {
            if (res.data.code == 300) {
              this.$refs.phone.innerHTML = "手机号已存在";
              this.$refs.phone.style.display = "inline";
              return false;
            }
          });
        this.$refs.phone.style.display = "none";
      }
      // 判断密码是否符合规则
      if (value === "password" || value === "all") {
        // /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[#@*&.])[a-zA-Z\d#@*&.]*$/只包含大小写字母数字特殊字符
        let pattern1 = /^(?=.*?[a-z])(?=.*?\d)[a-z\d]*$/;
        if (
          !this.user.password ||
          this.user.password.length < 6 ||
          !pattern1.test(this.user.password)
        ) {
          this.$refs.password.style.display = "inline";
          return false;
        } else {
          this.$refs.password.style.display = "none";
        }
      }
      // 判断性别是否选择
      if (value == "all") {
        if (!this.user.sex) {
          this.$refs.sex.style.display = "inline";
          return false;
        } else {
          this.$refs.sex.style.display = "none";
        }
      }
      return true;
    },
    register() {
      let flag = this.check("all");
      if (flag) {
        this.registry(this.user);
      }
    }
  }
};
</script>

<style scoped>
.regist {
  position: absolute;
  width: 430px;
  height: 580px;
  top: 50%;
  left: 50%;
  margin: -300px 0 0 -215px;
  border: 1px solid #fff;
  border-radius: 20px;
}

.title {
  width: 100%;
  text-align: center;
  font-size: 40px;
  color: white;
  margin: 45px 0 80px 0;
}

.form-item {
  position: relative;
  width: 360px;
  margin: 0 auto;
  padding-bottom: 30px;
}

input::-webkit-input-placeholder {
  color: #fff;
}

input::-moz-input-placeholder {
  color: #fff;
}

input::-ms-input-placeholder {
  color: #fff;
}

.form-item input {
  width: 333px;
  height: 48px;
  padding-left: 25px;
  border: 1px solid #fff;
  border-radius: 25px;
  font-size: 18px;
  color: #fff;
  background-color: transparent;
  outline: none;
}

.form-item p {
  position: absolute;
  top: 60px;
  left: 25px;
  color: #8f3a3e;
  display: none;
  font-size: 14px;
}

.form-item input[type="button"] {
  margin: 0;
  padding: 0;
  width: 358px;
  color: #1f6f4a;
  background-color: #fff;
}

.form-item .jump {
  display: block;
  color: #fff;
  top: 70px;
  left: 115px;
}

.form-item .jump a{
  color: #2A3662;
}

.sex {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: #fff;
  padding-left: 50px;
}

.sex span {
  font-size: 18px;
  color: #fff;
}

.sex input {
  width: 30px;
  height: 15px;
  margin-left: 35px;
}

.sex p {
  top: 26px;
  left: 50px;
}
</style>